<template>
  <el-container>
    <aside-layout></aside-layout>
    <el-main>
      <div class="page-container">
        <h1><i class="el-icon-s-check"></i> 退住费用审核</h1>
        <el-table :data="applications" style="width: 100%">
          <el-table-column prop="residentName" label="住户姓名" width="150" />
          <el-table-column prop="applicationDate" label="申请日期" width="150" />
          <el-table-column prop="amount" label="费用" width="100" />
          <el-table-column prop="status" label="状态" width="120" />
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="small" type="success" @click="approveApplication(scope.$index)">通过</el-button>
              <el-button size="small" type="danger" @click="rejectApplication(scope.$index)">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 新模块：审核统计 -->
        <div class="card review-stats">
          <h2><i class="el-icon-pie-chart"></i> 审核统计</h2>
          <p>待审核申请: {{ pendingCount }}</p>
          <p>已通过申请: {{ approvedCount }}</p>
          <p>已拒绝申请: {{ rejectedCount }}</p>
        </div>

        <!-- 新模块：常见问题 -->
        <div class="card faq">
          <h2><i class="el-icon-question"></i> 常见问题</h2>
          <ul>
            <li v-for="(question, index) in faqs" :key="index">
              <i class="el-icon-info"></i> {{ question }}
            </li>
          </ul>
        </div>

        <!-- 新模块：用户反馈 -->
        <div class="card feedback">
          <h2><i class="el-icon-message"></i> 用户反馈</h2>
          <el-input type="textarea" v-model="userFeedback" placeholder="请留下您的反馈" />
          <el-button type="primary" @click="submitFeedback">提交反馈</el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import AsideLayout from '@/layout/asideLayout.vue';

export default {
  name: 'DischargeFeeReview',
  components: {
    AsideLayout
  },
  data() {
    return {
      applications: [
        { residentName: '张三', applicationDate: '2023-10-01', amount: '¥5000', status: '待审核' },
        { residentName: '李四', applicationDate: '2023-10-02', amount: '¥3000', status: '待审核' },
        // 更多申请可以在这里添加
      ],
      faqs: [
        '如何查看审核记录？',
        '审核通过后多久生效？',
        '如何拒绝申请？'
      ],
      userFeedback: ''
    };
  },
  computed: {
    pendingCount() {
      return this.applications.filter(app => app.status === '待审核').length;
    },
    approvedCount() {
      return this.applications.filter(app => app.status === '已通过').length;
    },
    rejectedCount() {
      return this.applications.filter(app => app.status === '已拒绝').length;
    }
  },
  methods: {
    approveApplication(index) {
      this.applications[index].status = '已通过';
      this.$message.success('申请已通过');
    },
    rejectApplication(index) {
      this.applications[index].status = '已拒绝';
      this.$message.error('申请已拒绝');
    },
    submitFeedback() {
      if (this.userFeedback) {
        this.$message.success('感谢您的反馈！');
        this.userFeedback = '';
      } else {
        this.$message.error('请填写反馈内容');
      }
    }
  }
};
</script>

<style scoped>
.page-container {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.card {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

h1 i, h2 i {
  margin-right: 10px;
  color: #409EFF;
}

.el-table {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.el-table th, .el-table td {
  transition: background-color 0.3s;
}

.el-table th:hover, .el-table td:hover {
  background-color: #f2f6fc;
}

.el-button {
  transition: background-color 0.3s, transform 0.3s;
}

.el-button:hover {
  background-color: #66b1ff;
  transform: scale(1.05);
}
</style> 